<template>
  <div class="talk" ref="talk">
    <search @changeSearchState="changeSearchState"/>
    <ul class="talk_box" :style="{'max-height':listMaxHeight+'px'}" v-show="!searchState">
      <li :class="['talk_line',{active:item.choose}]" v-for="(item,index) in $store.state.chatList" @click="chatClick(item,index)" :key="index" @contextmenu.prevent="getItem(item,$event)">
        <!-- <span class="triangtop"></span> -->

        <!-- <div class="chat-msgfree">
          <p class="icon_msgfree_notread"></p>
          <img class="icon_msgfree mCS_img_loaded" src="../../assets/msgfree.png" />
        </div> -->

        <!-- <div class="talk_notread">99</div> -->
        
        <img class="talk_avatar" :src="item.toUserImg" />
        <div class="msg_box">
          <div class="talk_name">{{item.toUserName}}</div>
          <div class="talk_content">
            <div class="talk_text" v-if="item.content">{{item.content}}</div>
            <div class="talk_text" v-if="item.messageType==2">[图片]</div>
            <div class="talk_text" v-if="item.messageType==3">[视频]</div>
            <div class="talk_text" v-if="item.messageType==4">[名片]</div>
            <div class="talk_text" v-if="item.messageType==9">[文件]</div>
            <div class="last_talk_time">{{getYMDHMS(item.sendTime)||""}}</div>
          </div>
        </div>
      </li>
    </ul>

    <searchList v-show="searchState" @changeSearchState="changeSearchState" />
    <groupDialog :propData="propData" @changePropData="changePropData"/>
    
    <ul class="contextmenu" v-if="contextmenuState" ref="contextmenuEle">
      <!-- <li class="context_select" @click="talkTop">置顶聊天</li>
      <li class="context_select" @click="openDeleteTalkDialog">删除聊天</li>
      <li class="context_select">消息免打扰</li> -->
    </ul>

    <el-dialog
      :visible.sync="deleteTalkDialog"
      width="290px"
      :show-close="false"
      :close-on-click-modal="false">

      <div class="dialog_tips">
        <div>确定删除该聊天吗?</div>
        <div class="little_tips"><el-checkbox class="checkbox" v-model="cleanTalkCheck" @change="changeCheckState"></el-checkbox><span>同时删除聊天记录</span></div>
      </div>
      <div class="btns_box">
        <div class="primarybtn default" @click="cancelDeleteTalkDialog">取消</div>
        <div class="primarybtn">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {Dialog,Checkbox,Message} from 'element-ui'
import groupDialog from '../group_dialog'
import search from '../search'
import searchList from '../search_list'
import bus from '../../bus'
import {groupMemberList,friendsList} from '../../api/api'
export default {
  name:'talk',
  data(){
      return {
        listMaxHeight:0,
        contextmenuState:false,
        searchState:false,
        deleteTalkDialog:false,
        cleanTalkCheck:false,
        propData:{//子组件弹窗状态
          nickDialogState:false
        },
        chatChooseItem:'',
        // list:[
        //   {
        //     id:1,
        //     name:'爱因斯坦',
        //     img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //     text:'[已读] 哈哈哈',
        //     time:'4-20 11:00',
        //     choose:true
        //   },
        //   {
        //     id:2,
        //     name:'爱因斯坦',
        //     img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //     text:'[已读] 哈哈哈',
        //     time:'4-20 11:00',
        //     choose:false
        //   },
        //   {
        //     id:3,
        //     name:'爱因斯坦',
        //     img:'https://thirdwx.qlogo.cn/mmopen/vi_32/OQD4fMO3kYuJxibwZzlXy7cKs0Ech85xj7nAeHgFIA2sXJRkHFfaXhkia0WbyCmtzpmhPuJMbAwWPRu2VqVvnnBQ/132',
        //     text:'[已读] 哈哈哈',
        //     time:'4-20 11:00',
        //     choose:false
        //   }
        // ]
      }
  },
  components: {
      search,
      searchList,
      groupDialog,
      'el-dialog':Dialog,
      'el-checkbox':Checkbox
  },
  mounted(){
    this.$nextTick(()=>{
      this.listMaxHeight = this.$refs.talk.offsetHeight-56-1
    })

    bus.$on('close',msg => {
      this.contextmenuState = msg
    })

    if(this.$store.state.chatList.length!=0){
      console.log('第一个聊天的选项',this.$store.state.chatList[0])
      this.chatClick(this.$store.state.chatList[0],0)
    }
  },
  destroyed(){
    console.log('talk组件被销毁了')
    this.$store.commit('getChatChooseItem','')
  },
  watch:{
    '$store.state.chatChooseItem'(){
      console.log('enterwatch')
    },
    newMessage(){
      if(this.newMessage.type==6){
        var toId = this.newMessage.toId
        var toUserImg = this.newMessage.toUserImg
        var toUserName = this.newMessage.toUserName

        this.newMessage.toId = this.newMessage.sendUserId
        this.newMessage.toUserImg = this.newMessage.sendUserImg
        this.newMessage.toUserName = this.newMessage.sendUserName

        this.newMessage.sendUserId = toId
        this.newMessage.sendUserImg = toUserImg
        this.newMessage.sendUserName = toUserName

        this.newMessage.type = 1

        this.$store.commit('setChatList',this.newMessage)
        
        let params = {
            userId:this.$store.state.user.id
        }
        //加载好友列表
        friendsList(params)
        .then(res => {
          this.$store.commit('getFriendsList',res.data.data.list)
        })
      }
    }
  },
  computed: {
    newMessage() {
      return this.$store.state.message
    },
  },
  methods:{
    //点击发送名片
    sendCard(){
      this.shareCardState = true
    },
    //选中聊天
    chatClick(item,index){
      this.chatChooseItem = item
      // this.chatChooseItem.index = index
      console.log(this.chatChooseItem)
      console.log(index)

      if(this.chatChooseItem.type==1){
        var cmd = 105
        this.$store.commit('getChatChooseItem',item)
      }else if(this.chatChooseItem.type==0){
        var cmd = 107

        let params = {
            pageNo:1,
            pageSize:500,
            globalId:this.chatChooseItem.globalId,
            roomName:this.chatChooseItem.toUserName,
            roomId:this.chatChooseItem.toId
        }
        //加载群成员列表
        groupMemberList(params)
        .then(res => {
          this.$store.commit('chooseGroup',this.chatChooseItem.toId)
          this.$store.commit('getGroupMembersList',res.data.data.list)
          this.$store.commit('getChatChooseItem',item)
        })
      }
      this.$store.commit('chooseTalk',index)
      bus.$emit('closeDrawer',false)

      var sendData = {
        cmd:cmd,//105是好友，107是群
        ext:{
          messageId:this.chatChooseItem.messageId,
          globalId:this.chatChooseItem.globalId,
          sendUserId:this.$store.state.user.id,
          toUserId:this.chatChooseItem.toId,
          messageType:1
        },
        type:32
      }
      console.log('已读实体',sendData)
      ws.send(JSON.stringify(sendData))
    },
    //触发发送名片弹窗
    changeShareCardState(value){
      this.shareCardState = value
    },
    //打开群昵称弹窗
    openNick(){
      this.propData.nickDialogState = true
    },
    changePropData(data){
      this.propData = data
    },
    openDeleteTalkDialog(){
      this.deleteTalkDialog = true
    },
    cancelDeleteTalkDialog(){
      this.deleteTalkDialog = false
    },
    //改变选中状态
    changeCheckState(val){
      console.log(val)
    },
    //时间戳转日期时分
    getYMDHMS (timestamp) {
      if(!timestamp){
        return false
      }
      let time = new Date(timestamp)
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let date = time.getDate()
      let hours = time.getHours()
      let minute = time.getMinutes()
      let second = time.getSeconds()

      if (month < 10) { month = '0' + month }
      if (date < 10) { date = '0' + date }
      if (hours < 10) { hours = '0' + hours }
      if (minute < 10) { minute = '0' + minute }
      if (second < 10) { second = '0' + second }
      return month + '-' + date + ' ' + hours + ':' + minute
    },
    getItem(item,event){
      var event = event || window.event;
      this.contextmenuState = true
      console.log(item)

      let posX = 0, posY = 0;
      if (event.pageX || event.pageY) {
          posX = event.pageX;
          posY = event.pageY;
      } else if (event.clientX || event.clientY) {
          posX = event.clientX
          posY = event.clientY
      }

      let top = posY - this.$refs.talk.offsetTop
      let left = posX - this.$refs.talk.offsetLeft

      this.$nextTick(()=>{
        this.$refs.contextmenuEle.style.top = top + 'px'
        this.$refs.contextmenuEle.style.left = left + 'px'
      })
    },
    //更换搜索状态
    changeSearchState(value){
      this.searchState = value
      if(value&&value.choose){
        this.chatClick(this.$store.state.chatList[0],0)
        this.searchState = value.state
      }
    },
    //置顶聊天
    talkTop(){
      this.contextmenuState = false
    }
  }
}
</script>

<style scoped>
.talk{
  position: relative;
}
.talk_box{
  overflow: auto;
}
.talk_line{
  display: flex;
  align-items: center;
  height: 60px;
  padding: 10px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}
.talk_line.active{
  background: #edeff3;
}
.talk_line.active:hover{
  background: #edeff3;
}
.talk_line:hover{
  background: #fbfbfb;
}
.triangtop{
  position: absolute;
  top: 0;
  left: 0;
  border: 6px solid transparent;
  border-left: 6px solid #4c94ff;
  border-top: 6px solid #4c94ff;
  z-index: 10;
  border-top-left-radius: 4px;
}
.talk_notread{
  position: absolute;
  right: 10px;
  top: 10px;
  background: #fb7b7a;
  color: #fff;
  text-align: center;
  padding: 0 9px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  border-radius: 8px;
}
.chat-msgfree{
  position: absolute;
  right: 10px;
  top: 10px;
}
.icon_msgfree_notread{
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50px;
  background: #fb7b7a;
  right: 3px;
}
.icon_msgfree{
  width: 20px;
  height: 20px;
}
.talk_avatar{
  display: block;
  width:40px;
  height:40px;
  margin-right:10px;
}
.talk_content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msg_box{
  height:40px;
  flex:1;
}
.talk_name{
  color:#333;
  font-size: 14px;
}
.talk_text,.last_talk_time{
  font-size: 12px;
  color: #b9b9b9;
  height:20px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}
.talk_text{
  max-width: 147px;
}
.contextmenu{
  width:110px;
  position: absolute;
  overflow: hidden;
  background: white;
  z-index: 20;
  top:30px;
  right:-50px;
}
.context_select{
  width:110px;
  height:40px;
  padding:0 20px;
  cursor: pointer;
  font-size:14px;
  color:#333;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
}
.context_select:hover{
  background: #edeff3;
}

.dialog_tips{
  line-height: 20px;
  padding: 46px 0 37px;
  text-align: center;
}
.little_tips{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color:#999;
  margin-top: 5px;
}
.btns_box{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
.btns_box .primarybtn.default{
  margin-left: 0px;
}
.btns_box .primarybtn{
  margin-left:46px;
}

.checkbox{
  margin-right: 10px;
}
</style>